<template>
  <div class="show">
    <div class="zi p_prize">
      <span class="zi text">{{present_prize}}</span>-{{present_num}}<span class="zi text">名</span>
    </div>
    <!-- <img
      class="p_image"
      :src="present_image"
    /> -->
    <img
      class="p_image"
      :src='present_image'
    />
    <div class="zi text p_name">
      {{present_name}}
    </div>
  </div>
</template>

<script>
import store from "@/vuex/store";
export default {
  store,
  data() {
    return {
      present_prize: [],
      present_name: [],
      present_image: [],
      present_num: [],
      imgUrl: null
    };
  },
  watch: {},
  computed: {},
  methods: {
    nextView() {
      this.$router.push("/lottery");
    }
  },
  created() {
    var _this = this;
    document.onkeydown = function() {
      let key = window.event.keyCode;
      if (key == 39) {
        _this.nextView();
      }
    };
  },
  mounted() {
    this.present_prize = this.$store.state.present[
      this.$store.state.status
    ].prize;
    this.present_name = this.$store.state.present[
      this.$store.state.status
    ].name;
    this.present_image = this.$store.state.present[
      this.$store.state.status
    ].image;
    console.log(this.present_image);
    this.present_num = this.$store.state.present[this.$store.state.status].num;
  }
};
</script>
<style scoped>
.show {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/image/beijing.png") center center no-repeat;
}
.p_image {
  margin-top: 20px;
  width: 600px;
  height: 350px;
  border-radius: 10px;
}
.p_prize {
  margin-top: 12%;
}
.p_name {
  margin-top: 20px;
}
.zi {
  font-size: 40px;
  color: white;
}
.text {
  font-family: "幼圆";
  font-weight: 700;
  color: white;
}
</style>